<template>
  <div>
    <el-table :data="tableData"
    style="width: 100%"
    :header-cell-style="{background:'#FAFAFA'}"
    fit
    highlight-current-row>
        <el-table-column prop="number"   :label="$t('table.testNumber')" width="120" >
        </el-table-column>
        <el-table-column prop="subject"  :label="$t('route.subjectsList')" width="120" >
        </el-table-column>
        <el-table-column prop="catalog"  :label="$t('route.directorys')" width="120" >
        </el-table-column>
        <el-table-column prop="questionType" :label="$t('route.testType')" width="120" >
          <template slot-scope="{row}">
            {{row.questionType | formatText}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.stem')" width="120" >
          <template slot-scope="{row}">
            <p v-html="row.question"></p>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.date')" width="120" >
          <template slot-scope="{row}">
            {{ row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" :label="$t('route.difficulty')" width="120" >
          <template slot-scope="{row}">
            {{row.difficulty | FormatText}}
          </template>
        </el-table-column>
        <el-table-column prop="creator" :label="$t('route.enterPeople')" width="120"/>
        <el-table-column  prop="chkState" :label="$t('table.auditStatus')" width="120" >
          <template slot-scope="{row}">
            {{row.chkState | chkTypeState }}
          </template>
        </el-table-column>
        <el-table-column prop="zip" :label="$t('table.comments')" width="120">
          <template slot-scope="{row}">
            {{row.chkRemarks}}
          </template>
        </el-table-column>
        <el-table-column prop="chkUser" :label="$t('table.reviewer')" width="120" />
        <el-table-column prop="zip" :label="$t('table.releaseStatus')" width="120" >
          <template slot-scope="{row}">
            {{row | publishTypeState}}
          </template>
        </el-table-column>
        <el-table-column  fixed="right" :label="$t('table.actions')" width="200" >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="Preview(row)">{{$t("table.preview")}}</el-button>
            <el-button type="text" size="small" :disabled='row.chkState === 1 || row.chkState === 2' @click="verifyChkType(row)">{{$t("table.examine")}}</el-button>
            <el-button type="text" size="small" :disabled='row.publishState===1' @click="$router.push(`new?id=${row.id}`)">{{$t("table.edit")}}</el-button>
            <el-button type="text" size="small" @click="onPublish(row)">{{row.publishState === 1 && row.chkState === 1 ? '下架' : '上架'}}</el-button>
            <el-button type="text" size="small" @click="onDelete(row.id)" :disabled='row.publishState===1&& row.chkState === 1'>{{$t("table.delete")}}</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 预览框 -->
    <subject-preview v-model='subjectShow' :subjectId='subjectId'/>
    <!-- 审核弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="verifyShow"
      width="25%">
        <el-radio v-model.number="verifyType.chkState" :label="1">通过</el-radio>
        <el-radio v-model.number="verifyType.chkState" :label="2">拒绝</el-radio>
        <el-input
        style="margin-top:10px"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="verifyType.chkRemarks">
        </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="verifyShow = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import subjectPreview from '../subjectPreview'
import { choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
export default {
  components: { subjectPreview },
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      subjectShow: false,
      subjectId: '',
      verifyShow: false,
      // 修改状态
      verifyType: {
        id: '',
        chkState: 1,
        chkRemarks: ''
      }
    }
  },
  created () {

  },
  methods: {
    // 预览
    Preview (row) {
      this.subjectShow = true
      this.subjectId = row.id
    },
    // 审核
    verifyChkType (row) {
      this.verifyShow = true
      this.verifyType.id = row.id
    },
    // 发送请求申请更改
    async onSave () {
      await choiceCheck(this.verifyType)
      this.$message.success('更改成功')
      this.verifyShow = false
      // 调用父组件刷新页面
      this.$emit('on-success')
    },
    // 题库上架下架
    async onPublish (row) {
      console.log(row.id, row.publishState)
      if ((row.publishState) - 0 === 0) {
        await choicePublish({ id: row.id, publishState: row.publishState + 1 })
      }
      if ((row.publishState) - 0 === 1) {
        await choicePublish({ id: row.id, publishState: row.publishState - 1 })
      }
      this.$emit('on-success')
      this.$message.success('更改成功')
    },
    // 删除
    onDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: id })
        this.$message.success('删除成功')
        this.$emit('on-success')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang='less'>

</style>
